<template>
    <div class="card-list">
        <div class="card-item" v-for="(item, index) in dataSource" :key="index" @click="handleClick(item, index)">
        <div class="card-row card-icon-title">
            <!-- icon -->
            <span class="card-icon"></span>
            <!-- 文件类别 -->
            <span>{{ item.title }}</span>
        </div>
        <div class="card-row">
            <!-- 文件层次 -->
            <span>{{ item.level }}</span> | 
            <!-- 文件大类 -->
            <span>{{ item.category }}</span>
        </div>
        <!-- 文件描述 -->
        <div class="card-row description">{{ item.description }}</div>
        <!-- 过期时间 -->
        <div class="card-row expiration-time">{{item.expiration}}天</div>
    </div>
    </div>
</template>
<script lang="ts" setup>
    import { defineEmits } from 'vue';

    interface CardItem {
        title?: string;
        level?: string;
        category?: string;
        description?: string;
        expiration?: string | number;
    }
    defineOptions({
        name: 'dcc-card-list'
    });
    defineProps({
        dataSource: {
            type: Array<CardItem>,
            default: () => {
                return  []
            }
        }
    });

    const emits = defineEmits(['click'])

    function handleClick(item, index) {
        emits('click', item, index);
    }

</script>
<style lang="less" scoped>
    .card-list {
        display: flex;
        flex-wrap: wrap;
        .card-item{
            width: 30%;
            position: relative;
            display: inline-block;
            padding: 20px;
            margin: 0 20px 20px 0;
            border-radius: 5px;
            font-size: 14px;
            text-align: center;
            border: 1px solid #d2cfcf;
            box-sizing: border-box;
            cursor: pointer;
            // transition: expiration-time-show 1s linear;
            transition: transform 1s linear;
            box-shadow: 0 1px 1px -1px #00000029, 0 1px 1px 0 #0000001f, 0 1px 2px 2px #00000017;
            &:hover{
                box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
            }
            .card-row {
                display: block;
                margin-bottom: 5px;
            }
        .card-icon-title {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: 600px;
            .card-icon {
                display:inline-block;
                width: 30px;
                height: 30px;
                margin-right: 5px;
                border-radius: 50%;
                background-color: #ccc;
                overflow: hidden;
            }
        }
        .description {
            font-size: 12px;
            color: #ccc;
        }
        .expiration-time {
            display: none;
            position: absolute;
            bottom: -20px; // 出现在卡片外部
        }
        &:hover{
            .expiration-time {
                display: block;
                font-size: 10px;
                color: red
            }
        }
    }
    @keyframes expiration-time-show {
        0% {
            display: none;
            color: none;
        }
        100% {
            display: block;
            color: red;
        }
}
    }


</style>